import React, { useRef, useEffect } from "react";
import {
    Scene, WebGLRenderer, MeshNormalMaterial, Mesh, DoubleSide, Shape,
    Matrix4, Vector3, Vector2, Object3DEventMap, MeshPhongMaterial, MeshBasicMaterial,
    BoxGeometry, TetrahedronGeometry, DodecahedronGeometry, IcosahedronGeometry, PolyhedronGeometry, SphereGeometry,
    TubeGeometry, LatheGeometry, ExtrudeGeometry,
    WireframeGeometry,
} from 'three';
import "./css/ResponsiveDesign.css"
import Stage from '../component/Stage';
import CustomSinCurve from '../component/CustomSinCurve';

//Canvas自适应


const stage = new Stage();
const { scene, renderer } = stage;



// const geometry = new BoxGeometry(1, 1, 1, 2, 2, 2);
// const geometry = new TetrahedronGeometry(0.5, 16);
// const geometry = new DodecahedronGeometry(1.5, 1);
// const geometry = new IcosahedronGeometry(1.5, 1);
// const geometry = new PolyhedronGeometry(
//     [-1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0],
//     [0, 1, 2, 0, 2, 3],
//     0.5, 0
// );
// const geometry = new SphereGeometry(1);

//管道
// const path = new CustomSinCurve();
// const geometry = new TubeGeometry(path, 128, 0.05, 4, false);


//车削(让一条曲线绕Y轴旋转)
// const points = [];
// for (let i = 0; i < 1; i += 0.1) {
//     const x = (Math.sin(i * Math.PI * 2 + 2.7) + 1) / 5;
//     points.push(new Vector2(x, i));
// }
// const geometry = new LatheGeometry(points);


//挤压
const shape = new Shape();
shape.moveTo(0, 0);
shape.lineTo(0.1, 0);
shape.lineTo(0.1, 0.1);
// const geometry = new ExtrudeGeometry(shape, {
//     depth: 0.5,
//     steps: 1,
//     bevelEnabled: false,//倒角
// });
const path = new CustomSinCurve();
const geometry = new ExtrudeGeometry(shape, {
    steps: 128,
    extrudePath: path,//延路径挤出(与倒角冲突)
});

{
    const material = new MeshNormalMaterial({
        polygonOffset: true,
        polygonOffsetFactor: 1,
        polygonOffsetUnits: 1,
        side: DoubleSide,
    });
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);
}
{
    const material = new MeshBasicMaterial({
        wireframe: true
    });
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);
}












let isRender: number = 0;
const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(stage.renderer.domElement);
        }
        if (isRender == 0)
            stage.animate();
        isRender++;
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;